<template>
  <view class="content">
    <view class="">
      <c-navBar
        title="学生管理"
        showAdd
        @addClick="addStu"
        @search="search"
      ></c-navBar>
      <view class="tabs-container">
        <v-tabs
          @change="tabChange"
          activeColor="rgba(0, 122, 255, 1)"
          v-model="active"
          field="name"
          :tabs="tabs"
          bgColor="#f2f2f2 !important"
        >
          <!-- <van-tab :title="tab.label" v-for="tab in tabs" :key="tab.id"></v-tab> -->
        </v-tabs>
      </view>
    </view>
    <view class="content-bottom-style">
      <c-list
        v-model:loading="loading"
        v-model:finished="finished"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        @load="Loads"
        class="stu-list-container"
      >
        <van-empty description="暂无数据" v-if="stuList.length === 0" />
        <view class="stu-card" v-for="stu in stuList" :key="stu.user_id">
          <view class="top">
            <view class="info-box">
              <image :src="user" mode="scaleToFill" class="info-box-img" />
              <!-- <van-icon :name="user" /> -->
              <text class="text">{{ stu.username }}</text>
            </view>
            <view class="info-box">
              <image :src="phone" mode="scaleToFill" class="info-box-img" />
              <!-- <van-icon :name="phone" /> -->
              <text class="text">{{ stu.phone }}</text>
            </view>
            <view class="info-box">
              <!-- <van-icon :name="friends" /> -->
              <image :src="friends" mode="scaleToFill" class="info-box-img" />
              <text class="text">{{ sexMap[stu.sex] }}</text>
            </view>
            <view class="info-box">
              <!-- <van-switch v-model="stu.checked" size="16px" /> -->
            </view>
          </view>
          <view class="bottom">
            <view class="info-box">
              <text class="label">学校：</text>
              <text class="text">{{ stu.school.school_name }}</text>
            </view>
            <view class="info-box">
              <text class="label">年级：</text>
              <text class="text">{{ stu.grade }}</text>
            </view>
            <view class="info-box">
              <text class="label">学生身份：</text>
              <text class="text zaidu">{{ stuType[stu.level] }}</text>
            </view>
            <view class="info-box">
              <text class="label">会员状态：</text>
              <text class="text normal">{{ stu.vip_state }}</text>
            </view>
            <view class="info-box">
              <text class="label">注册时间：</text>
              <text class="text">{{ stu.create_time }}</text>
            </view>
            <view class="info-box">
              <text class="label">渠道：</text>
              <text class="text">{{ fromType[stu.from] }}</text>
            </view>
          </view>
          <view class="operation">
            <van-button
              class="customBtn"
              color="#808080"
              size="mini"
              @click.stop="edit(stu.user_id, 'preview')"
              >查看</van-button
            >
            <van-button
              @click="setPassword(stu)"
              class="customBtn"
              color="#FF8D1A"
              size="mini"
              >修改密码</van-button
            >
            <van-button
              class="customBtn"
              color="#4E88E6"
              size="mini"
              @click.stop="edit(stu.user_id)"
              >编辑</van-button
            >
            <van-button
              class="customBtn"
              color="#D43030"
              size="mini"
              @click.stop="deleteStu(stu.user_id)"
              >删除</van-button
            >
          </view>
        </view>
      </c-list>
    </view>
  </view>
  <van-dialog
    v-model:show="show"
    title=""
    show-cancel-button
    @confirm="confirPassword"
    @close="dialogClose"
  >
    <uni-forms-item label="修改密码" style="padding: 32rpx">
      <uni-easyinput
        :inputBorder="false"
        v-model="password"
        placeholder="请输入密码"
      ></uni-easyinput>
    </uni-forms-item>
  </van-dialog>
</template>

<script setup>
import user from "@/static/svgIcon/user.svg"
import phone from "@/static/svgIcon/phone.svg"
import friends from "@/static/svgIcon/friends.svg"
import { reactive, ref } from "vue"
import { getList, del, savePassword } from "@/apis/studentManagement.js"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { sexMap, stuType, fromType } from "@/utils/fieldMap.js"
import { showSuccessToast, showFailToast, showToast } from "vant"
const show = ref(false)
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const password = ref("")
const currentUserId = ref("")
const currentUserInfo = ref({})
const titleStyle = {
  fontSize: "12px"
}
const queryParams = reactive({
  search_data: "",
  type: 0,
  page: 0,
  size: 10,
  total: 0
})
const tabs = [
  {
    id: 0,
    name: "全部"
  },
  {
    id: 1,
    name: "在读学生"
  },
  {
    id: 2,
    name: "注册学生"
  },
  {
    id: 3,
    name: "体验学生"
  },
  {
    id: 4,
    name: "结业学生"
  }
]
let stuList = ref([])
const active = ref(0)
onShow(() => {
  queryParams.page = 0
  finished.value = false
  stuList.value = []
  Loads()
})
const Loads = () => {
  queryParams.page++
  getStuList()
}
const tabChange = (index) => {
  queryParams.page = 0
  queryParams.type = index
  stuList.value = []
  finished.value = false
  getStuList()
}
const getStuList = () => {
  loading.value = true
  getList(queryParams)
    .then((res) => {
      if (res.code === 1) {
        queryParams.total = res.data.total
        queryParams.page = res.data.current_page
        stuList.value = stuList.value.concat(res.data.data)
        if (res.data.data.length === 0) {
          finished.value = true
        }
        loading.value = false
      } else {
        error.value = true
        loading.value = false
        pramas.page--
      }
    })
    .catch((err) => {
      error.value = true
      loading.value = false
      pramas.page--
    })
}
const search = (value) => {
  queryParams.search_data = value
  queryParams.page = 0
  stuList.value = []
  Loads()
}
const addStu = () => {
  uni.navigateTo({
    url: "/pages/studentManagement/addStuForm"
  })
}
const edit = (userId, type = "add") => {
  uni.navigateTo({
    url: `/pages/studentManagement/addStuForm?userId=${userId}&type=${type}`
  })
}
const confirmDelStu = (id) => {
  del({
    user_id: id
  }).then((res) => {
    uni.showSuccessToast("删除成功！")
    queryParams.page = 0
    stuList.value = []
    Loads()
  })
}

const setPassword = (stuInfo) => {
  currentUserId.value = stuInfo.user_id
  currentUserInfo.value = stuInfo
  show.value = true
}
const dialogClose = () => {
  password.value = ""
}
const confirPassword = () => {
  if (!password.value) {
    uni.showCToast("请输入密码！")
    return
  }
  savePassword({
    user_id: currentUserId.value,
    new_password: password.value
  }).then((res) => {
    uni.showSuccessToast(res.msg)
    show.value = false
  })
}
const deleteStu = (id) => {
  uni.showModal({
    title: "提示",
    content: "确认删除该学生信息吗？",
    success: function (res) {
      if (res.confirm) {
        confirmDelStu(id)
      } else if (res.cancel) {
        console.log("用户点击取消")
      }
    }
  })
  // showDialog({
  //   className: "custom-dialog",
  //   message: "确认删除该学生信息吗？",
  //   showCancelButton: true
  // })
  //   .then(() => {
  //     confirmDelStu(id)
  //   })
  //   .catch(() => {})
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.content-bottom-style {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.tabs-container {
  // background: #f2f2f2;
  margin: 0 3px;
  // position: sticky;
  // top: 46px;
  // z-index: 26;
}

.stu-list-container {
  padding-bottom: 32rpx;

  .stu-card {
    border-radius: 5px;
    background: #f5f5f5;
    margin: 10px 14px;
    padding: 14px 0 8px 0;

    .top {
      display: flex;
      justify-content: space-around;

      .info-box {
        display: flex;
        align-items: center;

        .text {
          color: #1f2329;
          font-size: 14px;
          font-weight: 400;
          margin-left: 4px;
        }
      }
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 50rpx 0 34rpx 20rpx;
      margin-top: 50rpx;
      border-bottom: 1px solid #d0d3d5;
      margin: 0 36rpx 0 30rpx;

      .info-box {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        width: 62%;

        &:nth-child(even) {
          width: 38%;
        }

        .label {
          font-size: 12px;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
        }

        .text {
          font-size: 12px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }

        .normal {
          color: #00baad;
        }

        .zaidu {
          color: #2a82e4;
        }
      }
    }

    .operation {
      margin-top: 22rpx;
      text-align: right;
      padding-right: 36rpx;
    }
  }
}

.info-box-img {
  width: 24px;
  height: 24px;
}
</style>
